import { UploadOutlined } from "@ant-design/icons";
import ProForm, { DrawerForm, ProFormDatePicker, ProFormDateRangePicker, ProFormDigit, ProFormGroup, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { ProColumns } from "@ant-design/pro-table"
import { Button, Upload } from "antd";
import { useState } from "react";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const columns:ProColumns[] = [
    {
      title:'计划名称',
      dataIndex: 'name11',
      ellipsis:true,
      width:120,
      renderText:()=>'2023市场计划'
    },
    {
      title:'活动计划描述',
      dataIndex: 'date1',
      hideInSearch:true,
      width:150,
      ellipsis:true,
      renderText:()=>'这是2023年的计划描述'
    },
    {
      title:'年度',
      dataIndex: 'date2',
      width:100,
      renderText:()=>'2023'
    },
    {
      title:'活动类别',
      dataIndex: 'date31',
      valueType:'select',
      width:100,
      valueEnum:{
        '1':'必投活动类项目',
        '2':'区域计划类项目',
        '3':'重点KOL项目',
      },
      renderText:()=>'3'
    },
    {
      title:'活动类型',
      dataIndex: 'date311',
      valueType:'select',
      width:100,
      valueEnum:{
        '1':'会议',
        '2':'项目',
        '3':'沙龙',
        '4':'培训',
      },
      renderText:()=>'2'
    },
    {
      title:'活动目的',
      dataIndex: 'date5',
      width:100,
      valueEnum:{
        '1':'产品上量',
        '2':'市场开拓',
        '3':'学术/产品推广',
        '4':'客户关系维护',
      },
      renderText:()=>'2'
    },
    {
      title:'产品线',
      dataIndex: 'name2',
      width:130,
      hideInSearch:true,
      renderText:()=>'产品线A,产品线B'
    },
    {
      title:'预算负责部门',
      dataIndex: 'bu',
      width:100,
      hideInSearch:true,
      renderText:()=>'市场部'
    },
    {
      title:'创建日期',
      dataIndex: 'createDate',
      width:100,
      hideInSearch:true,
      renderText:()=>'2023-05-01'
    },
    {
      title: "操作",
      valueType: 'option',
      fixed:'right',
      width:100,
      render: (text, record:any,_, action) => [
       <a key="b2" onClick={()=>setShowDetail(true)}>详情</a>
      ]
    }
  ]

  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowDetail(true)
          }} >新建</Button>]
        }
     dataSource={[{},{},{},{},{}]}
        scroll={{x:1300}}
      columns={columns}
      rowKey="id"
      search={{span:6}}
      toolbar={{
        settings: [],
      }}
      />
      <DrawerForm title='详情' width={1200} visible={showDetail}  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
           <div style={{backgroundColor:'#f0f0f0',color:'#448ef7',padding:'5px 10px',marginBottom:10}}>基本信息</div>
          <ProFormGroup>
            <ProFormText name="name111" width={'md'} label="年度预算名称" rules={[{ required: true}]}/>
            <ProFormDatePicker.Year name="name112" width={'md'} label="活动年度" rules={[{ required: true}]}/>

            <ProFormSelect name="name62" width={'md'} label="活动类别" options={[{label:'必投活动类项目',value:'1'},{label:'区域计划类项目',value:'2'},{label:'重点KOL项目',value:'3'}]} />
            <ProFormSelect name="name63" width={'md'} label="活动类型" options={[{label:'会议',value:'1'},{label:'项目',value:'2'},{label:'沙龙',value:'3'},{label:'培训',value:'4'}]} />
            <ProFormSelect name="name64" width={'md'} label="活动目的" options={[{label:'产品上量',value:'1'},{label:'市场开拓',value:'2'},{label:'学术/产品推广',value:'3'},{label:'客户关系维护',value:'4'}]} />
            <ProFormSelect name="name641" width={'md'} label="产品线" options={[{label:'产品线A',value:'1'},{label:'产品线B',value:'2'}]} />
            <ProFormTextArea name="name101" width={'lg'} label="活动计划描述" rules={[{ required: true}]}/>

          </ProFormGroup>
          <div style={{backgroundColor:'#f0f0f0',color:'#448ef7',padding:'5px 10px',marginBottom:10}}>费用</div>
          <ProFormGroup>
            <ProFormDigit name="name101" width={'md'} label="去年总费用" />
            <ProFormDigit name="name102" width={'md'} label="今年总费用" rules={[{ required: true}]}/>
            <ProFormSelect name="name103" width={'md'} label="预算负责部门" options={[{label:'市场部',value:'1'},{label:'BU',value:'2'},{label:'其他',value:'3'}]}/>
            <ProFormSelect name="name104" width={'md'} label="收益方" options={[{label:'公司',value:'1'},{label:'BU',value:'2'}]}/>

          </ProFormGroup>
        
      </DrawerForm>
    </PageContainer>)
}